<template>
  <div id="goods">
    <div class="boxAndImg">
      <input
        type="checkbox"
        class="box"
        :checked="status"
        @change="statusChange"
      />
      <img :src="img" alt="" class="Img" />
    </div>
    <div class="hAndSpan">
      <h6 class="h">{{ title }}</h6>
      <span class="Span">￥{{ price }}</span>
      <div id="Counter">
        <slot name="Counter"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import Counter from '@/components/Counter.vue'
export default {
  components: {
    Counter,
  },
  props: {
    title: {
      default: '',
      type: String,
    },
    status: {
      default: true,
      type: Boolean,
    },
    img: {
      default: '/',
      type: String,
    },
    price: {
      default: '',
      type: Number,
    },
    count: {
      default: 0,
      type: Number,
    },
    id: {
      required: true,
      default: 0,
      type: Number,
    },
  },
  methods: {
    statusChange(e) {
      this.$emit('statusChange', { id: this.id, value: e.target.checked })
    },
  },
}
</script>

<style lang="less">
#goods {
  display: flex;
  height: 8rem;
  width: 100%;

  .boxAndImg {
    height: 100%;
    width: 40%;
    position: relative;

    .box {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .Img {
      position: absolute;
      display: block;
      width: 85%;
      height: 85%;
      left: 15%;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .hAndSpan {
    height: 100%;
    width: 60%;
    position: relative;

    .h {
      position: absolute;
      top: -1.8rem;
      word-wrap: break-word;
      word-break: break-all;
      font-size: 0.9rem;
    }

    .Span {
      display: block;
      position: absolute;
      bottom: 1.5rem;
      font-size: 0.9rem;
      color: red;
      font-weight: 800;
    }

    #Counter {
      position: absolute;
      bottom: 1.5rem;
      right: 0;
    }
  }
}
</style>
